import React from 'react';
import { Popover, Icon as AntIcon, Button } from 'antd';
import { Modal } from 'antd-mobile';
import { RangeDnD } from '@/pages/Recruitment/containers/ScheduleV2';
import { Icon } from '@/pages/Recruitment/components';
import { px2Time, checkIntersection } from './utils';

const dotStyle = {
    width: 8,
    height: 8,
    borderRadius: '50%',
    background: '#fff',
    border: '1px solid #5590F6'
    // position: 'absolute'
};

export default function DaySchedule({
    date,
    defaultRangeList = [],
    staticRangeList = [],
    rowsNum = 48,
    rowHeight = 22,
    minUnit = 22,
    tip,
    setTip,
    onChange,
    ...restProps
}) {
    // console.log('🚀 ~ defaultRangeList', defaultRangeList);
    const popoverContent = (
        <div
            onClick={e => {
                e.stopPropagation();
            }}
            onTouchStart={e => {
                e.nativeEvent.stopImmediatePropagation();
            }}
            style={{ width: 230 }}
        >
            <div style={{ fontSize: 14, color: 'rgba(0,0,0,.65)' }}>
                <AntIcon type="info-circle" theme="filled" style={{ color: '#5590F6', marginRight: 8 }} />
                拖动上下小圆点可直接修改时间
            </div>
            <div
                style={{
                    position: 'relative',
                    margin: '20px 0 32px',
                    height: 40,
                    display: 'flex',
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    paddingLeft: 8,
                    paddingRight: 12,
                    backgroundColor: '#F0F7FF',
                    borderRadius: 2,
                    border: '1px solid #5590F6',
                    borderLeft: '3px solid #5590F6'
                }}
            >
                开始时间-结束时间
                <Icon style={{ fontSize: 16 }} type="listfunction_delete_icon_default" />
                <div style={{ position: 'absolute', top: -12, left: 24, padding: 8 }}>
                    <div style={dotStyle}></div>
                </div>
                <div style={{ position: 'absolute', bottom: -12, right: 24, padding: 8 }}>
                    <div style={dotStyle}></div>
                </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <Button type="primary" size="small" onClick={() => setTip({ ...tip, show: false })}>
                    我知道了
                </Button>
            </div>
        </div>
    );

    const props = {
        rowsNum,
        rowHeight,
        minUnit,
        defaultRangeList,
        staticRangeList,
        renderExpandUp(item) {
            let border = null;
            if (staticRangeList.some(it => checkIntersection(it.range, item.range))) {
                border = {
                    border: '1px solid #FFA22D'
                };
            }
            return (
                <div style={{ position: 'absolute', top: -12, left: 24, padding: 8 }}>
                    <div style={{ ...dotStyle, ...border }}></div>
                </div>
            );
        },
        renderExpandDown(item) {
            let border = null;
            if (staticRangeList.some(it => checkIntersection(it.range, item.range))) {
                border = {
                    border: '1px solid #FFA22D'
                };
            }
            return (
                <div style={{ position: 'absolute', bottom: -12, right: 24, padding: 8 }}>
                    <div style={{ ...dotStyle, ...border }}></div>
                </div>
            );
        },
        customRemove: true,
        renderRemove(cb) {
            const style = {
                position: 'absolute',
                top: '50%',
                right: 12,
                transform: 'translateY(-50%)',
                cursor: 'pointer'
            };
            return (
                <div
                    style={style}
                    onClick={() => {
                        Modal.alert('确定删除此面试时间？', '', [
                            { text: '取消' },
                            {
                                text: '确认',
                                onPress: () => {
                                    if (cb) cb();
                                }
                            }
                        ]);
                    }}
                >
                    <Icon style={{ fontSize: 16 }} type="listfunction_delete_icon_default" />
                </div>
            );
        },
        // 自定义拖动项样式
        renderDragItem(item) {
            // 检查冲突
            const style = {
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'flex-start',
                height: '100%',
                paddingLeft: 8,
                paddingRight: 32,
                overflow: 'hidden',
                cursor: 'move',
                backgroundColor: '#F0F7FF',
                borderRadius: 2,
                border: '1px solid #5590F6',
                borderLeft: '3px solid #5590F6'
            };
            let impact = '';
            if (staticRangeList.some(it => checkIntersection(it.range, item.range))) {
                style.backgroundColor = 'rgba(253,243,231,0.92)';
                style.border = '1px solid #FFA22D';
                style.borderLeft = '3px solid #FFA22D';
                // style.color = '#F55656';
                style.fontWeight = 500;
                impact = '行程冲突';
            }
            const { range = [] } = item;
            const colHeight = range[1] - range[0];
            const title = range.map(it => px2Time(it, minUnit)).join('-');
            const content = (
                <div style={style} title={impact && colHeight <= 36 ? `${title}(行程冲突)` : ''}>
                    {impact && colHeight > 36 && <div>{impact}</div>}
                    {colHeight >= 22 && <>{title}</>}
                </div>
            );
            if (item?.first) {
                return (
                    <Popover
                        content={popoverContent}
                        visible={tip?.show}
                        onVisibleChange={() => setTip({ ...tip, show: false })}
                        trigger="click"
                        arrowPointAtCenter={false}
                        getPopupContainer={trigger => trigger.parentElement}
                    >
                        {content}
                    </Popover>
                );
            }
            return content;
        },
        // 自定义对比项样式
        renderStaticItem(item) {
            const { range = [] } = item;
            const colHeight = range[1] - range[0];
            return (
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'center',
                        overflow: 'hidden',
                        height: '100%',
                        backgroundColor: '#F6F7F8',
                        borderRadius: 2,
                        borderLeft: '3px solid #DCE0E8',
                        textAlign: 'left',
                        fontSize: 12,
                        color: '#49536C',
                        fontWeight: 400,
                        paddingLeft: 4
                    }}
                    title={colHeight <= 36 ? '面试官已有行程(不推荐)' : ''}
                >
                    {colHeight >= 22 && <div>{item.title || '面试官已有行程'}</div>}
                    {colHeight > 36 && <div style={{ fontSize: 10, color: '#BCC1CD', fontWeight: 400 }}>不推荐</div>}
                </div>
            );
        },
        onRangeChange(nextRangeList) {
            // setRangeList(nextRangeList);
            if (onChange) {
                onChange({
                    [date]: nextRangeList
                });
            }
        },
        // 可附加的数据
        onRangeAdd(item) {
            if (tip?.first) {
                setTip({ ...tip, first: false });
                return { ...item, first: true };
            }
            return item;
        },
        ...restProps
    };
    return <RangeDnD {...props} />;
}
